<template>
  <div class="cardDrag-container common-container">
    <div class="cardDrag-content">
      <div class="left-drag-container">
        <draggable
          tag="ul"
          class="cardDrag-list-wrap"
          v-model="leftComponentsList"
          :group="groupLeft"
          animation="300"
        >
          <li
            class="cardDrag-list"
            v-for="item in leftComponentsList"
            :key="item.id"
          >
            <div class="cardDrag">
              <svg-icon class="svg-width" :iconClass="item.icon"></svg-icon>
              <label>{{item.name}}</label>
            </div>
          </li>
        </draggable>
      </div>
      <div class="right-drag-container">
        <draggable
          tag="ul"
          class="cardDrag-list-wrap"
          v-model="rightComponentsList"
          :group="groupRight"
          animation="300"
          @add="handleAdd"
        >
          <li
            class="cardDrag-list"
            v-for="item in rightComponentsList"
            :key="item.id"
          >
            <div class="cardDrag cardBackground" :style="computedStyle">
              <div class="card-box">
                <svg-icon class="svg-width" :iconClass="item.icon"></svg-icon>
                <label>{{item.name}}({{item.orderId}})</label>
              </div>
            </div>
          </li>
        </draggable>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import group from '@/assets/image/group.png'
import { publicController} from '@/utils/publicPackage.js'
import _ from 'lodash'
export default {
  name: 'index',
  components: {
    draggable,
  },
  mixins:[ publicController ],
  data(){
    return{
      leftArray:[
        { id: '', orderId: 1, name: '电商购物评价', icon: 'dianshanggouwupingjia' },
        { id: '', orderId: 2, name: '波特五利', icon: 'bote5li' },
        { id: '', orderId: 3, name: '提炼产品卖点', icon: 'tilianchanpinmaidian' },
        { id: '', orderId: 4, name: '写周报', icon: 'xiezhoubao' },
        { id: '', orderId: 5, name: 'OKR', icon: 'OKR' },
        { id: '', orderId: 6, name: 'PPT框架', icon: 'PPTkuangjia' },
        { id: '', orderId: 7, name: '招聘需求', icon: 'xiezhaopinxuqiu' },
        { id: '', orderId: 9, name: '产品卖货笔记', icon: 'chanpinmaihuobiji' },
        { id: '', orderId: 10, name: '优化简历', icon: 'youhuajianli' },
        { id: '', orderId: 11, name: '数据分析', icon: 'shujufenxi' },
        { id: '', orderId: 12, name: '用户画像', icon: 'xieyonghuhuaxiang' },
        { id: '', orderId: 13, name: '竞品研究报告', icon: 'jingpinyanjiubaogao' },
        { id: '', orderId: 14, name: '小红书选题', icon: 'xiaohongshuxuanti' },
        { id: '', orderId: 15, name: '小红书标题', icon: 'xiaohongshubiaoti' },
        { id: '', orderId: 16, name: '小红书笔记', icon: 'xiaohongshubiji' },
        { id: '', orderId: 17, name: '知乎问答', icon: 'zhihuwenda' },
        { id: '', orderId: 18, name: '优化文章', icon: 'youhuawenzhang' },
        { id: '', orderId: 19, name: '单词例句', icon: 'tigongdanciliju' },
        { id: '', orderId: 20, name: '口语对话', icon: 'kouyuduihua' },
        { id: '', orderId: 21, name: '品牌slogan', icon: 'pinpaislogan' },
        { id: '', orderId: 22, name: '短视频脚本', icon: 'duanshipinjiaoben' },
        { id: '', orderId: 23, name: '问卷调查', icon: 'wenjuantiaocha' },
        { id: '', orderId: 24, name: '产品开发点子', icon: 'chanpinkaifadianzi' },
        { id: '', orderId: 25, name: 'HEART模型', icon: 'HERATmoxing' },
        { id: '', orderId: 26, name: '会议纪要', icon: 'xiehuiyijiyao' },
        { id: '', orderId: 27, name: '中英互译', icon: 'yingwenfanyi' },
        { id: '', orderId: 28, name: '行业报告', icon: 'hangyebaogao' },
        { id: '', orderId: 29, name: '年度总结', icon: 'nianduzongjie' },
        { id: '', orderId: 30, name: '创建todo', icon: 'xietodo' },
        { id: '', orderId: 31, name: '直播带货', icon: 'zhibodaihuo' },
        { id: '', orderId: 32, name: '写邮件', icon: 'xieyoujian' },
      ],
      rightArray:[
        { id: '', orderId: 101, name: '电商购物评价', icon: 'dianshanggouwupingjia' },
        { id: '', orderId: 102, name: '波特五利', icon: 'bote5li' },
        { id: '', orderId: 103, name: '提炼产品卖点', icon: 'tilianchanpinmaidian' },
        { id: '', orderId: 104, name: '写周报', icon: 'xiezhoubao' },
        { id: '', orderId: 105, name: 'OKR', icon: 'OKR' },
        { id: '', orderId: 106, name: 'PPT框架', icon: 'PPTkuangjia' },
        { id: '', orderId: 107, name: '招聘需求', icon: 'xiezhaopinxuqiu' },
        { id: '', orderId: 108, name: '短信节日营销', icon: 'duanxinjieriyingxiao' },
        { id: '', orderId: 109, name: '产品卖货笔记', icon: 'chanpinmaihuobiji' },
        { id: '', orderId: 110, name: '优化简历', icon: 'youhuajianli' },
        { id: '', orderId: 111, name: '数据分析', icon: 'shujufenxi' },
        { id: '', orderId: 112, name: '用户画像', icon: 'xieyonghuhuaxiang' },
      ],
      backgroundImg: group,
      cardId: 113,
      groupLeft:{
        name: 'itxst',
        pull: 'clone',  // 拖出
        put: false,   // 拖入
      },
      groupRight:{
        name: 'itxst',
        pull: false,  // 拖出
        put: true,   // 拖入
      },
      randomNumberList: [],
      leftComponentsList: [],
      rightComponentsList: [],
    }
  },
  computed:{
    computedStyle(){
      return{
        'background': `linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),url('${this.backgroundImg}')`,
        'background-size': `cover`,
        'background-repeat': 'no-repeat',
      }
    },
  },
  mounted () {
    this.initData()
  },
  methods:{
    // 初始化数据
    initData(){
      let _this = this
      this.leftArray.map(item =>{
        item.id = _this.randomNumber()
      })
      this.leftComponentsList = this.leftArray
      this.rightArray.map(item =>{
        item.id = _this.randomNumber()
      })
      this.rightComponentsList = this.rightArray
    },
    handleAdd(e){
      const newIndex = e.newIndex
      const newCard = _.cloneDeep(this.rightComponentsList[newIndex])
      newCard.id = this.randomNumber()
      newCard.orderId = this.cardId
      this.cardId = this.cardId + 1
      this.$set(this.rightComponentsList,newIndex,newCard)
    },
  }
}
</script>

<style lang="scss" scoped>
.cardDrag-container{
  padding: 20px;
}
.cardDrag-content{
  display: flex;
  border: 1px solid #cecece;
}
.left-drag-container{
  flex-shrink: 0;
  width: 270px;
  height: calc(100vh - 180px);
  overflow-x: hidden;
  overflow-y: auto;
  border-right: 1px solid #cecece;
  .cardDrag-list-wrap{
    display: flex;
    flex-wrap: wrap;
    padding: 0 20px;
    .cardDrag-list{
      flex-basis: 33.3%;
      flex-grow: 0;
      cursor: move;
    }
    .cardDrag{
      padding-top: 20px;
      box-sizing: border-box;
      height: 80px;
      text-align: center;
    }
    .svg-width{
      width: 20px;
      height: 20px;
    }
    label{
      display: block !important;
      text-align: center;
      color: #999;
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      white-space: break-spaces;  // 换行
      word-break:break-all;
      cursor: move;
    }
  }
}
.right-drag-container{
  flex: 1;
  flex-shrink: 1;
  height: calc(100vh - 180px);
  overflow-x: hidden;
  overflow-y: auto;
  .cardDrag-list-wrap{
    display: flex;
    flex-wrap: wrap;
    padding: 0 20px;
    .cardDrag-list{
      flex-basis: 20%;
      flex-grow: 0;
      cursor: move;
    }
    .cardDrag{
      box-sizing: border-box;
      height: 120px;
      text-align: center;
    }
    .cardBackground{
      border: 1px solid #e3f0f5;
      margin: 10px;
      border-radius: 5px;
      // 设置垂直居中对齐
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .svg-width{
      width: 30px;
      height: 30px;
    }
    label{
      display: block !important;
      text-align: center;
      color: #999;
      font-size: 12px;
      margin-top: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      white-space: break-spaces;  // 英文换行
      word-break:break-all;       // 中文换行
      cursor: move;
    }
  }
}

</style>

<style lang="scss">
.left-drag-container div span{
  display: inline-block;
  width: 100% !important;
  height: calc(100vh - 180px) !important;
}

.right-drag-container div span{
  display: inline-block;
  width: 100% !important;
  height: calc(100vh - 180px) !important;
}
.icon {
  width: 1em; height: 1em;//宽高可设成100% 这样可以根据父级元素改变图标大小
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

